<template>
  <div class="box-yuyi">
    <div class="box-left" v-loading="treeLoading">
      <el-tree
        ref="categoryTree"
        :data="treeData"
        node-key="id"
        :props="propsTree"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="handleNodeClick">
          <span class="el-tree-node__label" slot-scope="{ node }">
            <span>
              <i class="el-icon-folder close"></i>
              <i class="el-icon-folder-opened open"></i>
              {{ node.label }}
            </span>
          </span>
      </el-tree>
    </div>
    <div class="box-content">
      <el-tabs type="border-card" v-if="idCategory">
        <el-tab-pane label="待鉴定" lazy>
          <wait-open :id-category="idCategory"></wait-open>
        </el-tab-pane>
        <el-tab-pane label="划控档案">
          <zoned-control :id-category="idCategory"></zoned-control>
        </el-tab-pane>
        <el-tab-pane label="开放档案">
          <open-item :id-category="idCategory"></open-item>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { getCategoryTree } from '../../../api/category/category'
import OpenItem from './component/openAppraisal/openItem'
import WaitOpen from './component/openAppraisal/waitOpen'
import ZonedControl from './component/openAppraisal/zonedControl'

export default {
  name: 'OpenAppraisal',
  components: { ZonedControl, WaitOpen, OpenItem },
  // 开放鉴定
  data () {
    return {
      treeLoading: false,
      propsTree: {
        label: 'name',
        value: 'id',
        children: 'children'
      },
      treeData: [],
      idCategory: ''
    }
  },
  mounted () {
    // 默认收起左侧导航栏
    this.setNavNarrow(true)
    this.getTreeDoorClass()
  },
  methods: {
    ...mapActions('profile/navNarrow', ['setNavNarrow']),
    getTreeDoorClass () {
      // 左侧获取门类
      this.treeLoading = true
      getCategoryTree('sysModel', true).then(res => {
        this.treeData = res.data.data
        this.treeLoading = false
      }).catch(() => {
        this.treeLoading = false
      })
    },
    handleNodeClick (data) {
      if (data.idCategory) {
        this.idCategory = data.idCategory
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../styles/mixin";
  .fun-btn{
    padding-top: 15px;
  }
  ::v-deep .el-tree{
    padding-top: 15px;
  }
  .box-content {
    padding: 0;

    ::v-deep .el-tab-pane {
      height: calc(100vh - 155px);
      overflow-y: auto;
    }
  }
</style>
